<template>
	<s-layout navbar="inner1"  :bgStyle="{ color: 'transparent' }">
		<view class="content">
			<assNavbar :title="state.type==0?'商户入驻记录':'代理商户入驻'" :background="{
				img:sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png'),
				BGcolor:'transparent'
			}"/>
			<image class="bgTop" :src="sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png')" mode="widthFix" />
			<su-sticky bgColor="transparent">
				<su-tabs  :list="tabMaps" lineColor="#003288" :activeStyle="{color:'#003288'}"
					lineHeight="3" lineWidth="28" :scrollable="false" @change="onTabsChange" 
					:current="state.currentTab"></su-tabs>
					 
				<view class="ss-flex ss-p-l-50 ss-m-t-30">
					<button  
					v-for="(item,index) in btns" :key="index" 
					class="ss-reset-button btn-top " 
					:class="{'btn-top-act':state.btnIndex==index}"
					@click='state.btnIndex=index;getList()'>{{item.name}}</button>
				</view>
			</su-sticky>
			
			
			
			
			<view class="ss-p-x-20 ss-m-t-40">
				
				<scroll-view class="scroll-view" scroll-y :style="{height:pageHeight-150+`px`}" >
					<view v-if="state.list.length>0" style="padding-bottom:200rpx">
						<template v-for="(item,index) in state.list" :key="index">
							<!-- @tap="sheep.$router.go('/pages/commission/merchant/surpriseForm',{id:item.id,type:1})" -->
							<view class="block" >
								<view class="ss-flex block-head justify-between">
									<view>{{item.update_time}}</view>
									<view :style="{color:colorList[item.status]}">{{item.status_text}}</view>
								</view>
								<view class="block-body">
									<view>商户名称：{{item.merchant_name}}</view>
									<!-- <view>商家类型：{{}}</view> -->
									<template v-if="state.btnIndex!=2">
										<view >代理商姓名：{{item.agency_name}}</view>
										<view >代理商电话：{{item.agency_mobile}}</view>
									</template>
									<template v-else>
										<view >负责人姓名：{{item.name}}</view>
										<view >负责人电话：{{item.mobile}}</view>
									</template>
									
									<view v-if="item.remark">驳回理由：{{item.remark}}</view>
								</view>
								<view v-if="item.status==1&&state.type==0" class="ss-flex justify-end ss-p-x-28 ss-p-y-30" style="border-top:2rpx solid #F2F2F2">
									<button
									class="ss-reset-button btn-top " 
									@tap.stop="sheep.$router.go('/pages/commission/merchant/apply',{seeAccount:true,account:item.ck_result})"
									>查看账号</button>
								</view>
							</view>
						</template>
						
					</view>
					<s-empty v-else icon="/static/goods-empty.png"> </s-empty>
				</scroll-view>
			</view>
			<su-fixed bottom v-if="state.type==1">
				<view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
					<button  class="ss-reset-button btn ss-m-t-40" @click="gotoAdd()">
						新建商户
					</button>
				</view>
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	
	const sys_navBar = sheep.$platform.navbar;//标题栏高度
 	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		currentTab:0,
		btnIndex:0,
		type:1,//0商户自己入驻  1代理帮忙入驻
		list:[],
		isWrite:true,
		mobile:null
	})
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  ))
	const colorList=['#003288','#10D26A','#E81111']
	const tabMaps = [
	  {
	    name: '全部',
	    value: null,
	  },
	  // {
	  //   name: '草稿',
	  //   value: 'ing',
	  // },
	  {
	    name: '待审核',
	    value: 0,
	  },
	  {
	    name: '已驳回',
	    value: 2,
	  },
	  {
	    name: '已通过',
	    value: 1,
	  },
	];
	const btns=[
		{name:'本地生活',value:2},
		{name:'电商商家',value:1},
		// {name:'鲸喜商户',value:3},
	]
	
	// 切换选项卡
	function onTabsChange(e) {
		console.log(e.index)
	  state.currentTab = e.index;
	  getList()
	}
	
	async function getList(){
		const res = await sheep.$api.commission.merchant.applyList({
			serve:btns[state.btnIndex].value,
			status:tabMaps[state.currentTab].value,
			mobile:state.type==0?state.mobile:null,
			type:1,//1入驻  2进件
		})
		state.list=res.data
	}
	
	async function getInfo(){
		const res =await sheep.$api.commission.giveaway.getUserInfo()
		if(!res.data?.name){
			state.isWrite=false
		}else{
			state.isWrite=true
		}
		
	}
	function gotoAdd(){
		sheep.$router.go('/pages/commission/merchant/apply',{shopType:btns[state.btnIndex].value,type:state.type})//0自己入驻，1代入驻
		// if(state.isWrite){
		// 	sheep.$router.go('/pages/commission/merchant/apply',{shopType:btns[state.btnIndex].value,type:state.type})//0自己入驻，1代入驻
		// }else{
		// 	uni.showToast({
		// 		title: '请先前往填写资料',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// }
		
	}
	onLoad((options)=>{
		state.type=options.type
		state.mobile=sheep.$store('user').userInfo.mobile
		console.log('state.mobile',state.mobile)
		getList()
		getInfo()
	})
	
	
	onShow(()=>{
		
	})
	
</script>

<style lang="scss" scoped>
	// *{
	// 	box-sizing:border-box;
	// }
	.bgTop{
		width:100%;
		height:331rpx;
		margin-top:v-bind('-sys_navBar+"px"');
		margin-bottom:-200rpx
	}
	:deep().u-tabs{
		background:transparent!important;
		border:none!important;
	}
	.block{
		border-radius: 20rpx;
		background:#fff;
		font-size:28rpx;
		color:#616665;
		margin-top:20rpx;
		.block-head{
			padding:39rpx 33rpx;
			border-bottom:2rpx solid #F2F2F2;
		}
		.block-body{
			padding:20rpx 33rpx;
			line-height:2em
		}
	}
	.btn-top{
		width: 163rpx;
		height: 55rpx;
		background: #E8F1FF;
		border-radius: 28rpx;
		border: 2rpx solid #003288;
		font-size: 28rpx;
		color: #01338A;
		margin-right:20rpx
	}
	.btn-top-act{
		background: #01338A;
		color: #FFFFFF;
	}
	.btn{
		width: 702rpx;
		height: 80rpx;
		background: #003288;
		border-radius: 49rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>